<template>
<div>
    <h1>依赖函数方式 </h1>
    <div>name: {{name}}</div>
    <div>nameReverse: {{nameReverse}}</div>
    <div><button @click="nameMutation('棒棒哒---')">Mutation</button></div>
    <div><button @click="nameAction('棒棒哒---')">Action</button></div>

    <h1>直接用法</h1>
    <div>name: {{$store.state.user.name}}</div>
    <div>nameReverse: {{$store.getters['user/nameReverse']}}</div>
    <div><button @click="$store.commit('user/nameMutation', '棒棒哒---')">Mutation</button></div>
    <div><button @click="$store.dispatch('user/nameAction', '棒棒哒---')">Action</button></div>

</div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
    name: "Module",
    computed:{
        // 1. 数组方式
        // ...mapState('user', ['name']),
        // ...mapGetters('user', ['nameReverse'])

        // 2.对象方式
        ...mapState({
            name: state => state.user.name
        }),
        ...mapGetters({
            nameReverse: "user/nameReverse"
        })

    },
    methods:{
        // 1. 数组方式
        // ...mapMutations('user', ['nameMutation']),
        // ...mapActions('user', ['nameAction'])

        // 2.对象方式
        ...mapMutations({
            nameMutation: 'user/nameMutation'
        }),
        ...mapActions({
            nameAction: 'user/nameAction'
        })
    },
}
</script>